<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui@2.0.0/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui@2.0.0/css/onsen-css-components.css">

  <script src="https://unpkg.com/onsenui@2.0.0"></script>
  <script src="https://unpkg.com/systemjs@0.19.37/dist/system.js"></script>
  <script src="https://unpkg.com/typescript@1.8.10/lib/typescript.js"></script>
  <script src="https://unpkg.com/core-js@2.4.1/client/core.js"></script>
  <script src="https://unpkg.com/zone.js@0.6.21/dist/zone.js"></script>
  <script src="./system.config.js"></script>

  <script>
    System.import('inline');
  </script>
</head>
<body>

  <app></app>

  <script type="text/typescript">
  import {
    Component,
    OnsenModule,
    NgModule,
    CUSTOM_ELEMENTS_SCHEMA
  } from 'ngx-onsenui';
  import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

  @Component({
    selector: 'app',
    template: `
    <ons-page>
      <ons-toolbar>
        <div class="center">Example</div>
      </ons-toolbar>
      <div class="content">
        <div style="text-align: center; margin: 10px">
          <p>Hello World!</p>
        </div>
      </div>
    </ons-page>
    `
  })
  export class AppComponent {
  }

  @NgModule({
    imports: [OnsenModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  class AppModule { }

  platformBrowserDynamic().bootstrapModule(AppModule);
  </script>

</body>
</html>
